<template>
  <el-table :data="tableData" class="tb-edit" border stripe :height="height" :highlight-current-row="!disabled"
    @row-click="handleCurrentChange">
    <el-table-column v-if="showIndex" type="index" width="50">
    </el-table-column>
    <el-table-column v-for="(item,index) in tableHeader" :key="index" :prop="item.name" :headerAlign="'center'"
      :align="item.align" :label="item.title" :fixed="item.fixed" :min-width="item.width" show-overflow-tooltip>
      <template slot-scope="scope">
        <el-select v-if="item.type === 'select'" size="small" v-model="scope.row[item.name]"
          @change="handleEdit(scope.$index, scope.row)" placeholder="请选择内容" value="">
          <el-option v-for="option in item.data" :disabled="disabled" :value="option.name" :key="option.name"
            :label="option.name" />
        </el-select>
        <template v-else-if="item.type === 'btn'">
          <el-button v-for="p in item.buttons" :disabled="disabled" @click="onSelected(scope.$index,scope.row)"
            :type="p.typeName" circle :icon="p.icon" plain size="small" >
          </el-button>
        </template>

        <el-input v-else-if="item.type === 'text'" size="small" :disabled="item.disabled || disabled"
          v-model="scope.row[item.name]" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)" />
        <span>{{scope.row[item.name]}}</span>
      </template>
    </el-table-column>

  </el-table>
</template>

<script>
  export default {
    name: "EditTable",
    props: {
      "tableData": Array,
      "showIndex": { //是否显示首列 index
        type: Boolean,
        default: true
      },
      "tableHeader": Array,
      "height": Number,
      "stripe": { //是否为斑马纹table
        type: Boolean,
        default: true
      },
      "disabled": Boolean
    },
    methods: {
      handleCurrentChange(row, event, column) {
      },
      handleEdit(index, row) {
        this.$emit("handleEdit", {
          index: index,
          row: row
        })
      },
      onSelected: function(index, row) {
        this.$emit("onTableBtn", {
          index: index,
          row: row
        })
      }
    }
  }
</script>

<style scoped>
  .tb-edit .el-input,
  .tb-edit .el-select {
    display: none
  }

  .tb-edit .current-row .el-input,
  .tb-edit .current-row .el-select {
    display: block
  }

  .tb-edit .current-row .el-input+span,
  .tb-edit .current-row .el-select+span {
    display: none
  }
</style>
